import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_utils/src/extensions/context_extensions.dart';
import 'package:series_play/generated/assets.dart';
import 'package:series_play/utils/comm_style.dart';
import 'package:series_play/widget/app_color.dart';
import 'package:series_play/widget/app_image.dart';
import 'package:series_play/widget/app_text.dart';

import '../../comm/base/base_state.dart';
import '../../widget/app_button.dart';
import 'perks_controller.dart';

class PerksPage extends StatefulWidget {
  const PerksPage({super.key});

  @override
  State<PerksPage> createState() => _PerksPageState();
}

class _PerksPageState extends BaseControllerState<PerksPage, PerksController> {
  @override
  Widget buildPage(BuildContext context) {
    // 余额模块
    final balanceWidget = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: context.mediaQueryPadding.top + 18.w),
        CommStyle.shaderMaskView(
          AppText.secondary(
            '赚取金币，解锁剧集',
            fontWeight: FontWeight.bold,
            color: const Color(0xFFF3D9AD),
          ),
          colors: [
            const Color(0xFFC47112),
            const Color(0xFFF7D8BE),
            const Color(0xFFF7A548),
          ],
          stops: [0, 0.5, 1],
        ),
        10.verticalSpace,
        Row(
          children: [
            Container(
              padding: const EdgeInsets.all(0.5).w,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    const Color(0xFF8044B5),
                    const Color(0xFFC27334),
                    const Color(0xFFD4A86A),
                  ],
                ),
                borderRadius: BorderRadius.circular(11).r,
              ),
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 13).w,
                height: 22.w,
                decoration: BoxDecoration(
                  color: const Color(0xFF23252C),
                  borderRadius: BorderRadius.circular(11).r,
                ),
                child: Row(
                  children: [
                    AppText.secondary(
                      '账户余额',
                      fontSize: 11,
                      color: const Color(0xFFF3D9AD),
                    ),
                    20.horizontalSpace,
                    AppImage(Assets.imagesIcGold, size: 12),
                    6.horizontalSpace,
                    AppText.secondary(
                      '100',
                      fontSize: 11,
                      color: const Color(0xFFF3D9AD),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    );

    final signTaskItemWidth =
        (context.mediaQuerySize.width -
            16.w * 2 -
            3.w * 6 -
            12.w * 2 -
            0.5.w * 2) /
        7;

    // 签到奖励
    final signTaskWidget = Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12).w,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(
            height: signTaskItemWidth * 2,
            child: ListView.separated(
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return signTaskItem(signTaskItemWidth, index < 3);
              },
              separatorBuilder: (context, index) {
                return 3.horizontalSpace;
              },
              itemCount: 7,
              scrollDirection: Axis.horizontal,
            ),
          ),
          20.verticalSpace,
          AppButton('签到获得', onTap: () {}),
          15.verticalSpace,
        ],
      ),
    );

    // 新手专属任务
    final newbieTaskWidget = Container(
      margin: const EdgeInsets.only(top: 20).w,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          AppText.title('新手专属任务', color: Colors.white, fontSize: 17),
          6.verticalSpace,
          AppText('仅有一次机会', color: AppColor.white_40, fontSize: 12),
          14.verticalSpace,
          Container(
            decoration: BoxDecoration(
              color: const Color(0xFF23252C),
              borderRadius: BorderRadius.circular(11).r,
              border: Border.all(width: 0.5.w, color: const Color(0xff373737)),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                newbieTaskItem(
                  Assets.imagesIcPerksEmail,
                  '绑定邮箱',
                  '+30',
                  0,
                  () {},
                ),
                newbieTaskDivider(),
                newbieTaskItem(
                  Assets.imagesIcPerksFackbook,
                  '关注Facebook账号',
                  '+30',
                  0,
                  () {},
                ),
                newbieTaskDivider(),
                newbieTaskItem(
                  Assets.imagesIcPerksTiktok,
                  '关注Tiktok账号',
                  '+30',
                  1,
                  () {},
                ),
                newbieTaskDivider(),
                newbieTaskItem(
                  Assets.imagesIcPerksYouToBe,
                  '关注YouTuBe账号',
                  '+10',
                  1,
                  () {},
                ),
              ],
            ),
          ),
        ],
      ),
    );

    // 时长任务
    final videoLookTimeTaskWidget = Padding(
      padding: const EdgeInsets.symmetric(horizontal: 13).w,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          AppText('看15min最高领100金币', color: AppColor.white_60, fontSize: 12),
          15.verticalSpace,
          SizedBox(
            height: 200.w,
            child: ListView.builder(
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return videoLookTimeItem();
              },
              itemCount: 7,
              scrollDirection: Axis.horizontal,
            ),
          ),
          AppText('今日已观看XX分钟', color: AppColor.white_60, fontSize: 12),
          20.verticalSpace,
          AppButton('去看剧', onTap: () {}),
          15.verticalSpace,
        ],
      ),
    );

    // 广告任务
    final adTaskWidget = Container(
      margin: const EdgeInsets.only(top: 20).w,

      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          AppText.title('广告任务', color: Colors.white, fontSize: 17),
          6.verticalSpace,
          AppText('每天获得大量金币', color: AppColor.white_40, fontSize: 12),
          14.verticalSpace,
          Container(
            height: 65.w,
            padding: const EdgeInsets.symmetric(horizontal: 16).w,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(Assets.imagesBgPerksAdTask),
                fit: BoxFit.fill,
              ),
              borderRadius: BorderRadius.circular(11).r,
            ),
            child: Row(
              children: [
                52.horizontalSpace,
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    AppText.title('看广告获取金币(0/20)', color: AppColor.white),
                    4.verticalSpace,
                    Row(
                      children: [
                        AppImage(Assets.imagesIcGold, size: 13),
                        4.horizontalSpace,
                        AppText.secondary(
                          '+20',
                          color: const Color(0xffDFC073),
                        ),
                      ],
                    ),
                  ],
                ),
                const Spacer(),
                // 0 待完成 1领取
                GestureDetector(
                  onTap: () {},
                  child: Container(
                    height: 28.w,
                    constraints: BoxConstraints(minWidth: 72.w),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          const Color(0xFFF2A9E5),
                          const Color(0xFFFAE8F0),
                        ],
                      ),
                      borderRadius: BorderRadius.circular(4).r,
                    ),
                    alignment: Alignment.center,
                    child: AppText('去完成', color: Colors.black, fontSize: 14),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

    return Container(
      width: 1.sw,
      height: double.infinity,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(Assets.imagesBgPerksTop),
          fit: BoxFit.fitWidth,
          alignment: Alignment.topCenter,
        ),
      ),
      child: SingleChildScrollView(
        padding: const EdgeInsets.fromLTRB(16, 0, 16, 16).w,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            balanceWidget,
            createGradientCard('签到奖励', signTaskWidget),
            newbieTaskWidget,
            createGradientCard('看剧集领金币', videoLookTimeTaskWidget),
            adTaskWidget,
          ],
        ),
      ),
    );
  }

  /// 渐变边框卡片背景容器
  Widget createGradientCard(String title, Widget child) {
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.only(top: 20).w,
      padding: const EdgeInsets.all(0.5).w,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [const Color(0xFFED958C), const Color(0xFF23252C)],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
        borderRadius: BorderRadius.circular(11).r,
      ),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [const Color(0xff522d2d), const Color(0xFF23252C)],
            stops: [0, 1],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
          borderRadius: BorderRadius.circular(11).r,
        ),
        child: Column(
          children: [
            Container(
              width: 0.5.sw,
              constraints: BoxConstraints(minHeight: 30).w,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(Assets.imagesBgPerksAwardTitle),
                  fit: BoxFit.fill,
                ),
              ),
              alignment: Alignment.center,
              child: AppText(title, color: Colors.white),
            ),
            12.verticalSpace,
            child,
          ],
        ),
      ),
    );
  }

  /// 签到任务item
  Widget signTaskItem(double itemWidth, bool isValidSign) {
    return Container(
      padding: const EdgeInsets.all(1).w,
      width: itemWidth,
      height: itemWidth * 2,
      decoration: BoxDecoration(
        color: const Color(0xCF434653),
        borderRadius: BorderRadius.circular(6).r,
        gradient: isValidSign
            ? LinearGradient(
                colors: [const Color(0xFFD90F52), const Color(0xFFF99917)],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0.7, 1],
              )
            : null,
      ),
      child: Column(
        children: [
          Expanded(
            child: Container(
              width: double.infinity,
              height: double.infinity,
              decoration: isValidSign
                  ? null
                  : BoxDecoration(
                      color: const Color(0xFF22242D),
                      borderRadius: BorderRadius.circular(6).r,
                    ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  AppText('20', fontSize: 15, color: AppColor.white),
                  6.verticalSpace,
                  AppImage(Assets.imagesIcGold, size: 18),
                ],
              ),
            ),
          ),
          2.verticalSpace,
          AppText('第1天', fontSize: 12, color: AppColor.white_60),
          2.verticalSpace,
        ],
      ),
    );
  }

  /// 新人任务分割线
  Widget newbieTaskDivider() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16).w,
      child: Container(
        color: const Color(0xFFBCFDF7),
        height: 0.5.w,
        width: double.infinity,
      ),
    );
  }

  /// 新人任务item
  Widget newbieTaskItem(
    String icon,
    String taskName,
    String taskAward,
    int taskType,
    VoidCallback onTap,
  ) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14).w,
      child: Row(
        children: [
          AppImage(icon, size: 38),
          14.horizontalSpace,
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              AppText.title(taskName, color: AppColor.white),
              8.verticalSpace,
              Row(
                children: [
                  AppImage(Assets.imagesIcGold, size: 13),
                  4.horizontalSpace,
                  AppText.secondary(taskAward, color: const Color(0xffDFC073)),
                ],
              ),
            ],
          ),
          const Spacer(),
          // 0 待完成 1领取
          GestureDetector(
            onTap: onTap,
            child: Container(
              height: 28.w,
              constraints: BoxConstraints(minWidth: 72.w),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: taskType == 0
                      ? [const Color(0xFFF2A9E5), const Color(0xFFFAE8F0)]
                      : [const Color(0xFFD90F52), const Color(0xFFE75E29)],
                ),
                borderRadius: BorderRadius.circular(4).r,
              ),
              alignment: Alignment.center,
              child: AppText(
                taskType == 0 ? '去完成' : '领取',
                color: taskType == 0 ? Colors.black : Colors.white,
                fontSize: 14,
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 看剧任务item
  Widget videoLookTimeItem() {
    return Container();
  }

  @override
  PerksController createController() {
    return PerksController();
  }

  @override
  bool hideAppbar() {
    return true;
  }

  @override
  bool safeAreaFormTop() => false;

  @override
  bool safeAreaFormBottom() => false;

  @override
  bool showDefaultBackground() {
    return true;
  }
}
